﻿@using viBook.Common
@{
    dynamic isChapter = ViewBag.CurrentPage == ControllerEnum.Chapters;
    string postCommentWidth = isChapter ? "255px" : "424px";
    string postCommentHeight = isChapter ? "60px" : "110px";
    string commentBodyWidth = isChapter ? "180px" : "388px";
    string postButtonPadding = isChapter ? "3px 5px" : "7px 12px";
    string cancelButtonPadding = isChapter ? "4px 7px" : "7px 12px";
}
<script id="CommentTemplate" type="text/html"> 
    @*New comment*@
    <div class="comment-body" id="post-new-comment">
        Post a new comment:
        <br />
        <br />
        <textarea data-bind="value: comment().content" class="post-comment" cols="15" rows=6 maxlength="500" style="width: @postCommentWidth; height: @postCommentHeight"></textarea>
        <br />
        <div style="text-align: right">
        <input class="form-sub" type="submit" data-bind="click: postComment" value="Post" style="padding: @postButtonPadding"></input>
        &nbsp;or&nbsp;
        <a data-bind="click: cancelPostComment" href="#post-new-comment" class = "form-btn" style="padding: @cancelButtonPadding">Cancel</a>
        </div>
    </div>
    <br/>
    @*Count comments*@
    <h2 class="section">
        <span data-bind="text: viewmodel.numberOfComments() +' comments '"/>  
        <span data-bind="text: '(page '+ viewmodel.commentPageNo()"/>
        <span data-bind="text: 'of '+ viewmodel.totalCommentPage() +')'"/>
    </h2>
    @*A list of existing comments*@
     {{if viewmodel.numberOfComments()>0}}
        <ol id="comment" class="comments" data-bind="template: {name:'CommentListTemplate', foreach: commentCollection,afterRender: onRenderCommentCompleted}"></ol>
    {{else}}
        <div style="padding-bottom: 20px;text-align: center">
            There isn't any comment yet<br/>
            Be the first to comment.
        </div>
    {{/if}}
    @*Pager*@
    <div class="page">
        <div class="pagination">
            <a class="next_page" rel="next" id="prev" data-bind="visible: isShowPrevBtn,click: fetchPreviousCommentPage">Previous</a>
            <a class="next_page" rel="next" id="next" data-bind="visible: isShowNextBtn,click: fetchNextCommentPage">Next</a>
        </div>
    </div>
</script>
<script id="CommentListTemplate" type="text/html">
    <li class="response comment group " id="commentItem">
        {{if $data.isAuthorized()}}
        <a class="close"  data-bind="attr: {href: '#comment-'+id()}, click: deleteFunc, visible: isAuthorized" id="closeButton">
            <img alt="close" title="Detete this comment" src="../../Content/admin/images/icons/cross_grey_small.png">
        </a>
        {{/if}}
        <h2>
            <a data-bind="attr: { href: '#comment-'+id(), title: username}" class="url" rel="contact" >
                <img alt="avatar" class="photo fn"  data-bind="attr: {src: userImage}">
                <span data-bind="text: username"/>    
            </a>
        </h2>
        <div class="comment-body" style="width: @commentBodyWidth">
            <span data-bind="text: content" />
        </div>
        <span class="comment-meta-likes">
            <a class="likes-list" data-bind="css: { 'liked-by-current-user': isLiked}, text: numberOfLike"></a>
        </span>
        <p class="comment-meta">
            <a class="posted" data-bind="text: createdDate"/>
            |&nbsp; <a data-bind="attr: { href: '#comment-'+id()}, click: likeFunc, visible: isLiked, text:'You like'" class="likes liked-by-current-user"/> 
            <a data-bind="attr: { href: '#comment-'+id()}, click: likeFunc, visible: isLiked()==false, text:'Like?'" class="likes"/>
            |&nbsp; <a data-bind="attr: { href: '#comment-'+id()}, click: reportComment,visible: isReported()==false , text:'Report'" class="likes"/>
            <a data-bind="attr: { href: '#'},visible: isReported , text:'Reported'" class="likes liked-by-current-user"/>
        </p>
    </li>
</script>
